<template>
<view>
	<YgSearch></YgSearch>
	<!-- 轮播图 -->
	<u-swiper :list="swipreList" name="image_src" height="340"></u-swiper>
	<!-- 中间导航 -->
	<view class="u-flex nav">
		<navigator url="#" v-for="(item,index) in navList" :key="index" class="u-flex-1" >
			<u-image width="100%" mode="widthFix" :src="item.image_src"></u-image>
		</navigator>
	</view>
	<!-- 底部楼层 -->
	<view>
		<view v-for="(item1,index1) in footList" :key="index1">
			<!-- 标题 -->
			<navigator>
				<u-image width="100%" mode="widthFix" :src="item1.floor_title.image_src"></u-image>
			</navigator>
		<view class="u-flex" >
			<!-- 左侧 -->
			<navigator class="u-flex-1">
				<u-image width="100%" mode="widthFix" :src="item1.product_list[0].image_src"></u-image>
			</navigator>
			<!-- 右侧 -->
			<view  class="u-flex-2 ">
				<view class="u-flex" style="flex-wrap: wrap;">
					<navigator style="width:50%;"  v-for="(item2,index2) in item1.product_list.slice(1)" :key="index2">
					<u-image mode="widthFix" :src="item2.image_src"></u-image>
					</navigator>
				</view>
			</view>
		</view>
		</view>
	</view>
</view>

</template>

<script>
	export default {
		data(){
			return{
				swipreList:[],
				navList:[],
				footList:[]
			}
		},
		async onLoad(){
		// 轮播图
		const res = await	this.$u.get('/home/swiperdata')
		this.swipreList = res.message
		// 中间导航
		const navRes = await	this.$u.get('/home/catitems')
		this.navList = navRes.message
		// 底部楼层
		const footRes = await	this.$u.get('/home/floordata')
		console.log(footRes);
		this.footList = footRes.message
		}
	}
</script>

<style lang="scss" scoped>
.nav .u-flex-1{
		padding: 10rpx;

}
</style>
